<template>
  <fieldset>
    <legend>购物车Cart</legend>
    <ul>
      <li v-for="item in carts" :key="item.id">
        <b>名称:{{ item.title }}</b>
        ------
        <b>价格:{{ item.price }}</b>
        ------
        <b>库存:{{ item.count }}</b>
        ------
        <button @click="decreaseFn(item)">不要了退回去</button>
      </li>
    </ul>
    <h1>总价：{{ total }}</h1>
  </fieldset>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex"
export default {
  computed: {
    ...mapState("cart", ["carts"]),
    ...mapGetters("cart", ["total"])
  },
  methods: {
    ...mapMutations("cart", ["DECREASE_CART"]),
    ...mapMutations("product", ["INCREASE_INVENTORY"]),
    decreaseFn(item) {
      this.DECREASE_CART(item)
      this.INCREASE_INVENTORY(item)
    }
  }
}
</script>
